//商品列表数组
let productList = [{
        id: 1001,
        name: 'js高级编程',
        url: './image/shoppingBg_03.jpg',
        price: 35.89,
        num: 0,
        singlePrice: 0,
        state: false //是否选状态，true选中,false未选中
    },
    {
        id: 1002,
        name: 'css高级编程',
        url: './image/shoppingBg_06.jpg',
        price: 25.89,
        num: 0,
        singlePrice: 0,
        state: false
    }
]
let stateAll = false //是否全选状态，true选中,false未选中

/**
 * 显示购物车列表
 *   做什么?
 *    遍历商品列表数组，生成表格行
 */
function showProductList() {
    //初始化商品列表 表头
    let str = `
                <tr>
                    <th>序号</th>
                    <th>商品图片</th>
                    <th>商品信息</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th width="100px">总价</th>
                    <th>操作</th>
                </tr>
         `
    //遍历商品列表生成商品列表
    let productArry = productList.map(item => {
        return `
            <tr>
                <td>${item.id}</td>
                <td><img src="${item.url}" width="80px" alt=""></td>
                <td>${item.name}</td>
                <td>￥${item.price}</td>
                <td><input type="button" name="minus" value="-" ${item.num <= 0?'disabled':''} ><input type="text" name="amount"
                        value="${item.num}"><input type="button" name="plus" value="+"></td>
                <td>￥${item.singlePrice}</td>
                <td>
                    <a href="#">移入收藏</a><br>
                    <a href="#" class="delete-btn">删除</a>
                </td>
            </tr>
        `
    })
    str = str + productArry.join('')
    $('table').html(str)
}
/**
 * 购物车操作 数量加一减一
 */
function onProduct() {
    //加一
    //遍历所有加号绑定事件
    $('input[name="plus"]').on('click', function () {
        //获取id
        let id = $(this).parent().parent().find('td').first().html()
        let product = productList.find(item => item.id == id)
        product.num++
        product.singlePrice = (product.price * product.num).toFixed(2) //商品价格*数量
        showProductList()
        onProduct()
        totalPrice()
    })
    //减一
    $('input[name="minus"]').on('click', function () {
        //获取id
        let id = $(this).parent().parent().find('td').first().html()
        let product = productList.find(item => item.id == id)
        product.num--
        product.singlePrice = (product.price * product.num).toFixed(2) //商品价格*数量
        showProductList()
        onProduct()
        totalPrice()
    })

    //删除
    $('.delete-btn').on('click', function () {
        let id = $(this).parent().parent().find('td').first().html()
        let index = productList.findIndex(item => item.id == id)
        productList.splice(index, 1)
        showProductList()
        onProduct()
        totalPrice()
    })
}

/**
 * 计算总价
 */
function totalPrice() {
    let sum = productList.reduce((s, item) => s += Number(item.singlePrice), 0)
    $('.total-price').html(sum.toFixed(2))
}

/**
 * 添加商品
 *  做什么?
 *    点击添加按钮，获取表单内容，生成商品对象，添加商品列表数组, 重新刷新页面
 */
function addProduct() {
    //点击添加按钮
    $('#addbookbtn').on('click', function (e) {
        //获取表单内容
        let name = $('input[name="bookname"]').val()
        let price = $('input[name="bookprice"]').val()
        let url = $('input[name="bookpicture"]').val()
        let id = getRandom(1000, 9999)

        //生成商品对象
        let product = {
            id,
            name,
            url,
            price,
            num: 0,
            singlePrice: 0,
            state: false
        }

        //添加商品列表数组
        productList.push(product)
        // 重新刷新页面
        showProductList()
        onProduct()

        //清除表单数据
        $('input[name="bookname"]').val('')
        $('input[name="bookprice"]').val('')
        $('input[name="bookpicture"]').val('')
    })
}
/**
 *  随机颜色  
 * @param {*} x 
 * @param {*} y 
 * @returns 
 */
function getRandom(x, y) {
    var m = Math.min(x, y)
    var n = Math.max(x, y)
    return Math.floor(Math.random() * (n - m) + m)
}
showProductList()
onProduct()
addProduct()